<template>
  <div class="system-edit-post-container">
    <el-dialog v-model="state.isShowDialog" width="769px">
      <template #header>
        <div>{{'{{'}}(state.formData.id===0?'添加':'修改')+'{{table_info.comment}}'{{'}}'}}</div>
      </template>
      <el-form ref="formRef" :model="state.formData" :rules="state.rules" size="default" label-width="90px">
        {% for item in field_info %}
        {% if item.camelName not in ['id', 'createdBy','updatedBy','createdAt','updatedAt'] %}
        <el-form-item label="{{ item.comment }}" prop="{{ item.camelName }}">
          <el-input v-model="state.formData.{{ item.camelName }}" placeholder="请输入{{ item.comment }}名称" clearable />
        </el-form-item>
        {% endif %}
        {% endfor %}
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default" :loading="state.loading">
            {{'{{'}}state.formData.id===0?'新 增':'修 改'{{'}}'}}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { add{{ table_info.firstUpperName }}, edit{{ table_info.firstUpperName }} } from "/@/api/{{ package_info.package }}/{{ table_info.camelName }}/index.ts";
import { ElMessage, ElForm } from 'element-plus';

interface DialogRow {
  {% for item in field_info %}
  {% if item.camelName not in ['createdBy','updatedBy','createdAt','updatedAt'] %}
  {{ item.camelName }}: {{ item.tsType }}; // {{ item.comment }}
  {% endif %}
  {% endfor %}
}

const formRef = ref<InstanceType<typeof ElForm> | null>(null);
const state = reactive({
  loading: false,
  isShowDialog: false,
  formData: {
    {% for item in field_info %}
    {% if item.camelName not in ['createdBy','updatedBy','createdAt','updatedAt'] %}
    {% if item.tsType == 'string' %}
    {{ item.camelName }}: '', // {{ item.comment }}
    {% else %}
    {{ item.camelName }}: 0, // {{ item.comment }}
    {% endif %}
    {% endif %}
    {% endfor %}
  } as DialogRow,
  rules: {
    {% for item in field_info %}
    {% if item.camelName not in ['id', 'createdBy','updatedBy','createdAt','updatedAt'] %}
    {{ item.camelName }}: [
      { required: true, message: "{{ item.comment }}不能为空", trigger: "blur" }
    ],
    {% endif %}
    {% endfor %}
  },
});

const openDialog = (row?: DialogRow) => {
  resetForm();
  if (row) {
    state.formData = row;
  }
  state.isShowDialog = true;
};

const closeDialog = () => {
  state.isShowDialog = false;
};

const onCancel = () => {
  closeDialog();
};

const onSubmit = () => {
  const formWrap = formRef.value;
  if (!formWrap) {
    return;
  }
  formWrap.validate((valid: boolean) => {
    if (!valid) {
      return;
    }
    state.loading = true;
    if (state.formData.id === 0) {
      add{{ table_info.firstUpperName }}(state.formData)
        .then(() => {
          ElMessage.success('{{ table_info.comment }}添加成功');
          closeDialog();
          emit('get{{ table_info.firstUpperName }}List');
        })
        .finally(() => {
          state.loading = false;
        });
    } else {
      edit{{ table_info.firstUpperName }}(state.formData)
        .then(() => {
          ElMessage.success('{{ table_info.comment }}编辑成功');
          closeDialog();
          emit('get{{ table_info.firstUpperName }}List');
        })
        .finally(() => {
          state.loading = false;
        });
    }
  });
};

const resetForm = () => {
  state.formData = {
    {% for item in field_info %}
    {% if item.camelName not in ['createdBy','updatedBy','createdAt','updatedAt'] %}
    {% if item.tsType == 'string' %}
    {{ item.camelName }}: '', // {{ item.comment }}
    {% else %}
    {{ item.camelName }}: 0, // {{ item.comment }}
    {% endif %}
    {% endif %}
    {% endfor %}
  } as DialogRow;
  if (formRef.value) {
    formRef.value.resetFields();
  }
};

defineExpose({
  openDialog,
  closeDialog,
});

const emit = defineEmits(['get{{ table_info.firstUpperName }}List']);
</script>

<style scoped lang="scss">
</style>